<template>
    <div ref="myChart01"></div>
</template>

<script lang="ts" setup>
    // 引入echarts
    import * as echarts from 'echarts'
    import {ref, onMounted,defineProps} from "vue";
    const prop  = defineProps(["value"])
    const myChart01: any = ref(null);
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
        let myChart = echarts.init(myChart01.value);
        const www = 20;
        const value = prop.value;
        // 绘制图表
        myChart.setOption( {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient:"vertical",
                top: 'center',
                left: 'left',
                textStyle:{
                    color:'#ccc',
                    fontSize:12
                }
            },
            series: [
                {
                    name: '收益来源',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ["70%", "50%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '10',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 0.07, name: '年卡'},
                        {value: 0.53, name: '月卡'},
                        {value: 0.09, name: '周卡'},
                        {value: 0.31, name: '临时'}
                    ]
                }
            ]
        });
        window.onresize = function () { // 自适应大小
            myChart.resize();
        };
    });
</script>
